<!-- 数据概况 -->
<template>
	<view class="card d-flex">
		<view class="card_head relative d-flex mb-30">
			<text class="card_head_title relative">报告概况</text>
		</view>
		
		<view class="card_content d-flex">
			<view class="card_content_info d-flex mb-30">
				<view class="item d-flex">
					<text class="item_title">报告编号：EBP20241031-000000001（ID:3301）</text>
					<Copy :styleClass="{fontSize: '24rpx', color: '#6A1CF3', whiteSpace: 'nowrap'}" context="EBP20241031-000000001" />
				</view>
				<view class="item d-flex">
					<text class="item_title">生成时间：2024-08-08</text>
				</view>
			</view>
		
			<view class="card_content_msg d-flex">
				<view class="item d-flex mb-30">
					<view class="item_title d-flex">
						<view class="item_title_icon mr-20">
							<Icon name="order" color="#fff" />
						</view>
						报告共涉及<text class="bold">11</text>项内容
					</view>
				</view>
				
				<view class="item d-flex">
					<view class="item_title d-flex">
						<view class="item_title_icon mr-20 mb-30">
							<Icon name="order" color="#fff" />
						</view>
						报告共涉及<text class="bold">11</text>项内容
					</view>
					
					<view class="item_list pl-50">
						<view class="item_list_info d-flex mb-10">
							<Icon class="mr-10" name="info-circle" size="28rpx" color="#FF0000" />
							<text class="item_list_info_txt">借贷压力分析</text>
						</view>
						<view class="item_list_info d-flex">
							<Icon class="mr-10" name="info-circle" size="28rpx" color="#FF0000" />
							<text class="item_list_info_txt">多头借贷风险</text>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import { reactive, defineProps } from 'vue'
	import Copy from '@/components/Copy/index.vue'
	import Icon from '@/components/Icon/index.vue'
	
	const props = defineProps({
		info: {
			type: Object,
			default: () => {}
		}
	})
</script>

<style lang="scss" scoped>
.card {
	&_content{
		flex-direction: column;
		
		&_info {
			flex-direction: column;
			
			.item {
				&_title {
					font: {
						size: 26rpx;
					}
				}
			}
		}
	
		&_msg {
			padding: 30rpx 25rpx;
			border-radius: 16rpx;
			flex-direction: column;
			background: linear-gradient(to right, #F4F6FF, #FFF5F8);
			
			.item {
				flex-direction: column;
				font: {
					size: 26rpx
				}
				
				&_list {
					&_info {
						align-items: center;
					}
				}
				
				&_title {
					align-items: center;
					
					&_icon {
						padding: 5rpx 2rpx;
						background-color: #6642EA;
					}
				}
				
				.bold {
					color: #6642EA;
				}
			}
		}
	}
}
</style>